<template>
	<div class="evens">
	<div v-show="0==1">{{this.$store.state.Topic.topicId}}</div>
		<div class="layout">
			<el-form style="width:40rem"  :model="form" ref="formTopic" :rules="rules" label-width="130px" >
			  <el-form-item label="是否展示在首页:">
			    <el-radio-group v-model="form.home">
			      <el-radio  label="0">不展示</el-radio>
			      <el-radio  label="1">展示</el-radio>
			  </el-radio-group>
			  </el-form-item>
			  <el-form-item label="专题名称:"  prop="topicName">
			    <el-input v-model="form.topicName" placeholder="请输入专题名称"></el-input>
			  </el-form-item>
			  <el-form-item label="监测时间:" required>
					<el-col :span="11">
						<el-form-item prop="date1">
							<el-date-picker
							style="margin-right:0"
								v-model="form.date1"
								type="datetime"
								:picker-options="pickerBeginDateafter"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
       	 	<el-col class="line" :span="2">
							<div class="gang"></div>
					</el-col>
					<el-col :span="11">
						<el-form-item prop="date2">
							<el-date-picker
								v-model="form.date2"
								type="datetime"
								:picker-options="pickerBeginDateBefore"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-col>
			  </el-form-item>
			  <el-form-item label="载体类型:">
			    <el-checkbox-group v-model="form.carrier">
			      <el-checkbox class="w25" label="0" name="type">新闻</el-checkbox>
			      <el-checkbox class="w25" label="1" name="type">论坛</el-checkbox>
			      <el-checkbox class="w25" label="2" name="type">微博</el-checkbox>
			      <el-checkbox class="w25" label="3" name="type">平面媒体</el-checkbox>
			      <el-checkbox class="w25" label="5" name="type">博客</el-checkbox>
			      <el-checkbox class="w25" label="6" name="type">贴吧</el-checkbox>
			      <el-checkbox class="w25" label="7" name="type">其它</el-checkbox>
			      <el-checkbox class="w25" label="9" name="type">twitter</el-checkbox>
			      <el-checkbox class="w25" label="10" name="type">微信</el-checkbox>
			    </el-checkbox-group>
			  </el-form-item>
				<el-form-item label="监测范围:">
					<el-radio-group v-model="form.scope">
						<el-radio  label="-1">全部</el-radio>
						<el-radio  label="2">全国</el-radio>
						<el-radio  label="0">本地</el-radio>
						<el-radio  label="1">境外</el-radio>
					</el-radio-group>
				</el-form-item>
			  <el-form-item label="地域词:" prop="distKeyword">
			    <el-input v-model="form.distKeyword" placeholder="输入本地区的地域词,多个词按空格分开"></el-input>
			  </el-form-item>
			  <el-form-item label="主体词:">
			    <el-input v-model="form.nameKeyword" placeholder="输入本地区所关注的主题词,包括机构名和人名"></el-input>
			  </el-form-item>
				<el-form-item label="事件词:">
			    <el-input v-model="form.eventKeyword" placeholder="输入关注的主体上发生的事件词"></el-input>
			  </el-form-item>
			  <el-form-item label="排除关键词:">
			    <el-input v-model="form.excludeKeyword" placeholder="输入关注的主体上发生的事件词"></el-input>
			  </el-form-item>
			  <el-form-item class="put">
			    <el-button type="primary" @click="submitForm('formTopic')">保存</el-button>
			    <el-button @click="resetForm()">取消</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script >
import moment from 'moment'
	export default	{
		data() {
			return{
				topics:{},
				form:{
					home:'0',
					topicName:'',
					date1:'',
					date2:'',
					carrier:[],
					scope:'0',
					distKeyword:'',
					nameKeyword:'',
					eventKeyword:'',
					excludeKeyword:''
				},
				pickerBeginDateBefore: {
					disabledDate: (time) => {
							let beginDateVal = this.form.date1;
							if (beginDateVal) {
								let t = (time.getTime() < beginDateVal)||( time.getTime() > moment(beginDateVal).add(30,'days').valueOf())
								return t
							}
					}
				},
				pickerBeginDateafter: {
					disabledDate: (time) => {
							let afterDateVal = this.form.date2;
							if (afterDateVal) {
								let t = (time.getTime() > afterDateVal)||( time.getTime() <	moment(afterDateVal).subtract(30,'days').valueOf())
								return t
							}
					}
				},
				rules: {
					topicName: [
						{ required: true, message: '请输入专题名称', trigger: 'blur' },
						{ min: 0, max: 10, message: '长度在 10 个字符内', trigger: 'blur' }
					],
					distKeyword: [
						{ required: true, message: '请请输入地域词', trigger: 'blur' }
					],
					date1: [
						{ type: 'object', required: true, message: '请选择时间', trigger: 'change' }
					],
					date2: [
						{ type: 'object', required: true, message: '请选择时间', trigger: 'change' }
					],
				}
			}
		},
		mounted(){
			this.getTopic()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.updateTopic(this.$store.state.Topic.topicId||localStorage.topicId)
					} else {
						return false;
					}
				});
			},
			// 查询
			async getTopic(){
				let res = await this.$http.post('vrv-monitor-platform-web/topic/read/detail',{
					id:this.$store.state.Topic.topicId||localStorage.topicId
				})
				this.topics = res.body.data
				this.form.home = this.topics.home
				this.form.topicName = this.topics.topicName
				this.form.excludeKeyword = this.topics.excludeKeyword
				this.form.home = this.topics.home
				this.form.eventKeyword = this.topics.eventKeyword
				this.form.nameKeyword = this.topics.nameKeyword
				this.form.distKeyword = this.topics.distKeyword
				this.form.scope = this.topics.scope
				if(this.topics.carrier==-1){
					this.form.carrier = ['0','1','10','2','3','5','6','7','9']
				}else{
				this.form.carrier = this.topics.carrier.split(",")
				}
				// 日期转化
				this.form.date1 = moment(this.topics.monitorStartTime)
				this.form.date2 = moment(this.topics.monitorEndTime)
			},
			resetForm(){
				window.close()
			},
		  // 修改
			updateTopic:function(id){
				let m = this.form.carrier.sort()
				if(m =='0,1,10,2,3,5,6,7,9'){
					m = -1
				}else{
					m = this.form.carrier.join(',')
				}
				// console.log(this.form)
				// return
				this.$http.post('vrv-monitor-platform-web/topic/update',{
					id:id,//专题id
					home:this.form.home,//是否显示
					topicName:this.form.topicName.trim(),//专题名称
					monitorStartTime:this.form.date1,//开始时间
					monitorEndTime:this.form.date2,//结束时间
					carrier:m,//载体类型
					scope:this.form.scope,//监测范围
					distKeyword:this.form.distKeyword.trim(),//地域词
					nameKeyword:this.form.nameKeyword.trim(),//主体词
					eventKeyword:this.form.eventKeyword.trim(),//事件词
					excludeKeyword:this.form.excludeKeyword.trim()//排除关键词
				}).then((res)=>{
					if (res.body.success==true) {
						this.$message('修改成功');
  					// this.$router.push('/topic');
					}else{
						this.$message(res.body.message);
					}
				})
			}
		}
	}
</script>
<style scoped>
	.evens {
		padding: 3.125rem 3.75rem;
	}
	.layout{
		display: flex;
	}
	.evens .item{
		flex:1;
	}
	.chose{
		width: 100%;
		margin-top: 3.125rem;
		text-align: center;
	}
	.chose button:first-child{
		margin-right: 6.25rem;
	}
	.chose button{
		padding: 0.625rem 1.875rem;
	}
	.el-form{
		margin: 0 auto;
	}
	.el-date-editor{
		width: 100% !important;
	}
	.w25{
		width: 24%;
		margin-left: 0!important;
	}

	.put button{
		width: 7rem;
	}
	.put button:first-child{
		margin-right: 1rem;
	}
	.gang{
		float: left;
		width: 14px;
    height: 3px;
    background: #898989;
    margin-left: 13px;
    margin-top: 15px;
	}
</style>